<template>
  <div class="search_input">
    <img class="inner_icon" src="@/assets/images/common/search.png" alt="" />
    <input v-bind="$attrs" v-model="inputValue" @input="handleChange" class="inner_input" />
    <img v-if="isEmpty" class="inner_close" src="@/assets/images/common/search_close.png" alt=""
      @click="removeInput()" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
    };
  },
  props: {
    value: "",
  },
  computed: {
    isEmpty() {
      return this.inputValue.length > 0;
    },
  },
  watch: {
    // value: {
    //     handler: function(n) {
    //         this.inputValue = n;
    //         this.$emit("input", this.inputValue);
    //     },
    //     immediate: true
    // }
  },
  methods: {
    removeInput() {
      this.inputValue = "";
      this.$emit("clearInput", this.inputValue);
    },
    handleChange(event) {
      this.inputValue = event.target.value;
      this.$emit("input", this.inputValue);
    },
  },
};
</script>

<style scoped>
.search_input {
  width: 354.17px;
  height: 41.67px;
  background: #ffffff;
  border: 0.35px solid #dddddd;
  border-radius: 6.94px;
  padding: 0 10.42px;
  box-sizing: border-box;
  display: flex;
  gap: 10.42px;
  align-items: center;
  margin: 0 auto;
}

.inner_icon {
  width: 15.97px;
  height: 15.97px;
}

.inner_close {
  width: 20.83px;
  height: 20.83px;
}

.inner_input {
  width: calc(100% - 20.94px);
  font-size: 13.89px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #888888;
  background: transparent;
  outline: none;
  border: none;
}
</style>
